﻿<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>SAEA.WebSocket Test</title>
</head>
<body>
    <button id="c_btn">连接</button>
    <button id="d_btn" disabled="disabled">断开</button>
    <div id="output" style="max-height:700px;overflow:scroll;"></div>

    <script type="text/javascript">
        function getDateStr() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            return (year + '年' + month + '月' + day + '日 ' + hour + ':' + minute + ':' + second);
        }

    </script>

    <script language="javascript" type="text/javascript">

        var websocket;

        var wsUri = "ws://127.0.0.1:39654/";

        var output;

        var msg = "这是一个SAEA.WebSocket 测试！";

        var c_btn = document.getElementById("c_btn");

        var d_btn = document.getElementById("d_btn");

        c_btn.onclick = function () {
            init();
            c_btn.disabled = "disabled";
            d_btn.disabled = "";
        };
        d_btn.onclick = function () {
            writeToScreen('客户端请求断开');
            websocket.close();
            c_btn.disabled = "";
            d_btn.disabled = "disabled";
        };

        function init() {

            output = document.getElementById("output");

            //for (var i = 0; i < 10; i++) {

            //    msg = msg + msg;
            //}

            testWebSocket();
        }

        function testWebSocket() {
            websocket = new WebSocket(wsUri);
            websocket.onopen = function (evt) {
                onOpen(evt)
            };
            websocket.onclose = function (evt) {
                onClose(evt)
            };
            websocket.onmessage = function (evt) {
                onMessage(evt)
            };
            websocket.onerror = function (evt) {
                onError(evt)
            };
        }

        function onOpen(evt) {
            writeToScreen("已连接到服务器");
            doSend(msg);
        }

        function onClose(evt) {
            writeToScreen('<span style="color: darkred;">服务器已同意断开连接</span>');
        }

        function onMessage(evt) {
            writeToScreen('<span style="color: blue;">收到服务器回复: ' + evt.data + '</span>');
            doSend(msg);
        }

        function onError(evt) {
            writeToScreen('<span style="color: red;">异常:</span> ' + evt.data);
        }

        function doSend(message) {
            writeToScreen("发送数据: " + message);
            websocket.send(message);
        }

        function writeToScreen(message) {
            var pre = document.createElement("p");
            pre.style.wordWrap = "break-word";
            pre.innerHTML = getDateStr() + "   " + message;
            output.appendChild(pre);
        }
    </script>
</body>
</html>